<template>
	<view id="wrap">
		<view class="pr" :style="{
        width: '750rpx',
        height: '446rpx',
        background: `url(${navData.imgs}) no-repeat`,
        backgroundSize: '100% 100%',
      }">
			<c-navBar title="我的积分" isPerch isTran></c-navBar>
			<c-navBar v-if="navbarShow" bgColor="#C2E6B7" title="我的积分"></c-navBar>
			<view style="bottom: 20rpx" class="nav pa clo-fff">
				<view class="nav_item">
					<span>{{
            rattanList.totalIntegral ? rattanList.totalIntegral : 0
          }}</span>
					<p>总积分</p>
				</view>
				<view class="cut"></view>
				<view class="nav_item">
					<span>{{
            rattanList.treatWithdrawn ? rattanList.treatWithdrawn : 0
          }}</span>
					<p>可用积分</p>
				</view>
				<view class="cut"></view>
				<view class="nav_item">
					<span>{{
            rattanList.withdrawn ? rattanList.withdrawn : 0
          }}</span>
					<p>已用积分</p>
				</view>
			</view>
		</view>

		<view class="explain dis_sb bs">
			<view class="explain_title bs"> 积分明细 </view>
			<view class="clo-444 f24"> 使用须知 </view>
		</view>

		<view class="switch">
			<!-- <u-tabs
        :list="list1"
        lineColor="#2AD03D"
        lineWidth="50"
        :scrollable="false"
        :activeStyle="{
          color: '#1A1A1A',
          fontSize: '32rpx',
          fontWeight: 'bold',
        }"
        @click="switchTabs"
      ></u-tabs> -->
		</view>
		<c-scroll-list ref="list" :api="api" :apiParams="apiParams" @load="load">
			<template v-if="recordSwitch == 1">
				<view class="rattan_record" v-for="(item, i) in detailList" :key="i">
					<view class="rattan_l" style="width:72%;">
						<p>{{ item.title }}</p>
						<span>{{ item.createTime ? item.createTime : "" }}</span>
					</view>
					<view class="rattan_r1" :style="item.operateType == 1 ? '' : 'color: #333333'">
						<view style="display:flex;flex-direction:column;gap:4px">
							<view class="tagAB" v-if="item.status===0"
								style="background:#41a4e5;margin-right:10px;color:white;font-size:8px;padding:4px;border-radius:10%;width:max-content;letter-spacing:1px;">
								冻结</view>
							<!-- 0, 退款状态 0-未退款 e45cf4 1-退款中 e6a23c 2-退款成功 67c23a 3-退款失败 f56c6c-->
							<view class="tagAB" v-if="item.refundStatus!==0"
								style="background:blue;margin-right:10px;color:white;font-size:8px;padding:4px;border-radius:10%;letter-spacing:1px;"
								:style="{'background': item.refundStatus===0?'#e45cf4':item.refundStatus===1?'#e6a23c':item.refundStatus===2?'#67c23a':item.refundStatus===3?'#f56c6c':'red'}">
								{{ statusDic[item.refundStatus] }}</view>
						</view>

						{{ item.type == 2 ? "-" : "" }}{{ item.rattan }}
					</view>
				</view>
			</template>
			<template v-if="recordSwitch == 2">
				<view class="all_price">
					已提现金额：￥{{ withdrawalAmount ? withdrawalAmount : 0 }}
				</view>
				<view class="withdrawal_record" v-for="(item, i) in detailList" :key="i">
					<view class="record_t">
						<p>提现</p>
						<text>-{{ item.rattan }}</text>
					</view>

					<view class="record_b">
						<p>{{ item.createTime ? item.createTime : "" }}</p>
						<text class="text1" v-if="item.status == 0">审核中</text>
						<text class="text3" v-else-if="item.status == 2">提现失败</text>
						<text class="text2" v-else>已提现</text>
					</view>
				</view>
			</template>
		</c-scroll-list>
	</view>
</template>

<script>
	import {
		init_backgroundList
	} from "@/api/node.js";
	export default {
		data() {
			return {
				apiParams: {
					//这是接口参数
					type: 1,
					// userId:uni.getStorageSync('user').userId
				},
				navData: {},
				api: this.$api.frontendRattanDetailList,
				detailList: [], //记录
				rattanList: {}, //我的积分
				withdrawalAmount: "", // 已提现金额统计
				list1: [{
						id: 1,
						name: "积分记录",
					},
					{
						id: 2,
						name: "提现记录",
					},
				],
				recordSwitch: 1,
				navbarShow: false,
				withdrawableDate: "",
				statusDic: {
					0: '未退款',
					1: '退款中',
					2: '退款成功',
					3: '退款失败',
				},
			};
		},
		onPageScroll: function(e) {
			if (e.scrollTop > 5) {
				this.navbarShow = true;
			} else {
				this.navbarShow = false;
			}
		},
		methods: {
			async getImg() {
				const res = await init_backgroundList(1);
				this.navData = res;
			},
			// 积分信息
			load(res) {
				this.detailList = res.list;
				console.log("积分信息", res.list);
			},
			// 可提现时间
			getWithdrawableDate() {
				this.$api.getWithdrawableDate({}).then((res) => {
					console.log(res, "提现时间");
					this.withdrawableDate = res.data;
				});
			},
			// 切换提现
			switchTabs(e) {
				this.recordSwitch = e.id;
				if (e.id == 1) {
					this.apiParams.type = 1;
				} else {
					this.apiParams.type = 3;
				}
				this.$refs.list.refresh();
			},
			// 我的积分
			getRattan() {
				this.$api.rattanStatistics({}).then((res) => {
					// console.log(res, "我的积分");
					this.rattanList = res.data;
				});
			},
			//个人已提现金额
			withdrawn() {
				this.$api.withdrawnStatistics({}).then((res) => {
					// console.log("个人提现金额", res);
					this.withdrawalAmount = res.data;
				});
			},
			// 去提现
			goWithdrawDeposit() {
				uni.navigateTo({
					url: "/pages/my/pages/withdrawDeposit?num=" +
						this.rattanList.withdrawnRattan,
				});
			},
			// 邀请好友
			goInviteFriends() {
				uni.navigateTo({
					url: "/pages/my/pages/inviteFriends",
				});
			},
			// 开通庄主
			goOwner() {
				uni.navigateTo({
					url: "/pages/my/pages/ownerBuy",
				});
			},
		},
		onLoad(options) {
			this.getRattan();
			this.withdrawn();
			this.getWithdrawableDate();
		},
		onShow() {
			this.$refs.list.refresh();
			this.getRattan();
			this.getImg();
		},
	};
</script>

<style lang="scss" scoped>
	#wrap {
		width: 750rpx;
		height: 100vh;
		overflow: scroll;
	}

	.cane_num {
		.title {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #1a1a1a;
			margin: 20rpx 0rpx 10rpx;
		}

		.number {
			padding: 0rpx 38rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.num_l {
				width: 128rpx;
				height: 56rpx;
				background: transparent;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				opacity: 1;
			}

			.num_c {
				font-size: 64rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				color: #1a1a1a;
			}

			.num_r {
				width: 128rpx;
				height: 56rpx;
				background: #00b815;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				opacity: 1;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 56rpx;
			}
		}
	}

	.nav {
		width: 750rpx;
		height: 134rpx;
		// background: #B7F0BD;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.nav_item {
			display: flex;
			flex-direction: column;
			align-items: center;

			p {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				margin-bottom: 7rpx;
			}

			span {
				font-size: 48rpx;
				font-family: PingFang SC, PingFang SC;
			}
		}

		.cut {
			width: 1rpx;
			height: 48rpx;
			background: #fff;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
		}
	}

	.explain {
		width: 750rpx;
		padding: 32rpx;
		box-sizing: border-box;

		.explain_title {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #1a1a1a;
		}
	}

	.switch {
		width: 750rpx;
		border-top: 8rpx solid #f7f7f7;
		border-bottom: 1rpx solid #e6e6e6;

		::v-deep .u-tabs__wrapper__nav__line.data-v-48634e29 {
			bottom: 0;
		}
	}

	.rattan_record {
		padding: 20rpx 0rpx;
		margin: 0rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #dcdfe2;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.rattan_l {
			p {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			span {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.rattan_r1 {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #2ad03d;
			display: flex;
			align-items: center;
		}

		.rattan_r2 {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #666666;
		}
	}

	.all_price {
		margin: 0rpx 32rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #009e42;
		margin-top: 40rpx;
	}

	.withdrawal_record {
		padding: 20rpx 0rpx;
		margin: 0rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #dcdfe2;

		.record_t {
			display: flex;
			align-items: center;
			justify-content: space-between;

			p {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			text {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.record_b {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10rpx;

			p {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.text1 {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #ff8326;
			}

			.text2 {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #2ad03d;
			}

			.text3 {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #f56c6c;
			}
		}

		.tagAB {
			font-size: 10px;
			display: inline-block;
			background: red;
			padding: 3px;
			box-sizing: border-box;
			border-radius: 3px;
			color: white;
			margin-right: 5px;
		}
	}
</style>